<template>
    <view class="content">
        <view class="box">
			<view class="item">
				<view class="down-l">
					<view class="name">{{data.nickname}}</view>
					<view class="link">{{data.relation}}</view>
				</view>
				<view class="time">{{data.create_time}}</view>
			</view>
			<view class="down">
				<view class="item u-p-b-12">
					<view class="left">体检中心</view>
					<view class="right">{{data.centers || '无'}}</view>
				</view>
				<view class="item u-p-b-12">
					<view class="left">手机号</view>
					<view class="right">{{data.mobile || '无'}}</view>
				</view>
				<view class="item">
					<view class="left">体检时间</view>
					<view class="right">{{data.report_time}}</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="data.content">
			<view class="title">
				<image src="../../static/icon/icon_3.png" class="icon-3"></image>
				<view>体检报告解读</view>
			</view>
			<view>{{data.content}}</view>
		</view>
		<view class="box" v-if="data.file_uri">
			<view class="title">体检报告或影像资料</view>
			<image v-if="data.type == 1" :src="data.file_uri" mode="widthFix" @click="previewImage(data.file_uri)"></image>
			
			<view class="u-flex" v-if="data.type == 2">
				<view class="file">{{data.file_uri}}</view>
				<uni-link :href="data.file_uri" text="预览" showUnderLine="false" color="#db5b1b" font-size="13"></uni-link>
			</view>
		</view>
		
		<template v-if="data.status == 0">
			<view class="box">
				<textarea v-model="content" placeholder="请输入体检报告解读内容..." :auto-height="true" maxlength="-1" class="t-inp"></textarea>
			</view>
			<view class="btn" @click="$u.throttle(doSubmit, 500)">确认提交</view>
		</template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				content: '',
                id: '',
				data: {},
            };
        },
        onLoad(option) {
            this.id = option.id
			this.getData()
        },
        methods: {
			doSubmit() {
				if (!this.content) {
					this.$toast('请输入体检报告解读内容')
					return
				}
				this.$ajax('staff_edit_reports', {
				    userToken: this.$getSync('userToken'),
				    report_id: this.id,
					content: this.content,
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.content = ''
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			previewImage(url) {
			    let urlImage = []
			    urlImage[0] = url
			    uni.previewImage({
			        urls: urlImage,
			        current: 0
			    })
			},
			
            getData() {
				this.$ajax('staff_reports_detail', {
				    userToken: this.$getSync('userToken'),
				    report_id: this.id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.data = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.t-inp{
		width: 100%;
		min-height: 300rpx;
		height: auto;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	
	.file{
		flex: 1;
		word-break: break-all;
		white-space: pre-line;
	}
	
    page{
		background: linear-gradient(to top,#f5f5f5,#f5f5f5,#f5f5f5,#03b8b4);
    }
	.content{
		padding: 20rpx;
		min-height: 100vh;
	}
	.box{
		font-size: 26rpx;
		padding: 30rpx 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.down-l{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.name{
		font-size: 36rpx;
		font-weight: bold;
		word-break: break-all;
		white-space: pre-line;
		padding-bottom: 8rpx;
	}
	.link{
		font-size: 22rpx;
		color: #666c7f;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		background-color: #eff3f7;
	}
	.down-r{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		padding-left: 20rpx;
	}
	.time{
		font-size: 24rpx;
		color: #4f4f4f;
		padding-left: 20rpx;
	}
	.i-btn{
		padding: 12rpx 25rpx;
		font-size: 26rpx;
		color: #00b6bc;
		border: 2rpx solid #00b6bc;
		border-radius: 50rpx;
	}
	
	
	.title{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 18rpx;
	}
	.icon-3{
		width: 37rpx;
		height: 33rpx;
		margin-right: 10rpx;
	}
	
	.down{
		padding-top: 25rpx;
		margin-top: 25rpx;
		border-top: 2rpx solid #e6e6e6;
		font-size: 26rpx;
	}
	.left{
		width: 126rpx;
		color: #8e8e8e;
	}
	.right{
		flex: 1;
	}

</style>
